var db;
var le_id = getUrlVars()["leid"];
var g_id = getUrlVars()["id"];
var favourite = 0;

// connect to database
function connectDB() {
	db = window.openDatabase("JapaneseBasic", "1.0", "Japanese Database",
			500000);
	db.transaction(getGrammarDetail, errorCB);
}

// function will be called when an error occurred
function errorCB(err) {
	alert("Error processing SQL: " + err.code);
}

function successCB() {
	db.transaction(getGrammarDetail, errorCB);
}


// get all lesson from db
function getGrammarDetail(tx) {
	var sql = "SELECT g_id, g_title, g_mean, g_explain, g_note, g_example_jp, g_example_en, g_example_vi, g_lesson_id,g_favourite, g_dataversion_id,le_id, le_title "
			+ " FROM grammar "
			+ " INNER JOIN lesson"
			+ " ON grammar.g_lesson_id = lesson.le_id"
			+ " WHERE grammar.g_lesson_id =  " + le_id
			+ " AND grammar.g_id =  " + g_id + " ORDER BY g_id ASC ";
	tx.executeSql(sql, [], showGrammarDetail);
}



// show lesson list in html code
function showGrammarDetail(tx, results) {
    $('#grammar-title').append('<tr><td style="width:20px;background-color: rgb(66,112,167); "><span>&nbsp;</span></td>'
    		+ ' <td style="text-align: center"><span style="color: #F5003D;font-size:20px;font-weight:bold;">'  + results.rows.item(0).g_title +  '</span>'
    		+ '</td></tr>');
    //mean
    $('#grammar-mean').append(results.rows.item(0).g_mean);
    
    //explain
    var grammar_explain = results.rows.item(0).g_explain;
    var arrItem = grammar_explain.split('<div>');
    for(var i=1; i<arrItem.length; i++) { //i= 0 -> null
    	var itemContent = arrItem[i].split('</div>');  //noteContent co dang note1</div> ; note2</div>  -> lay ptu thu 0
    		$('#grammar-explain').append('<tr><td  style="width:20px;background-color: rgb(66,112,167); vertical-align:middle; "><span style="color: #fff;">☞</span></td><td style="text-align: left;">'
    	    		+ '<span>'+itemContent[0]+'</span></br>'
    	    		+ '</td></tr>');
    }
    
    
    var grammar_example_js_array = results.rows.item(0).g_example_jp.split('|');
    var grammar_example_en_array = results.rows.item(0).g_example_en.split('|');
    var grammar_example_vi_array = results.rows.item(0).g_example_vi.split('|');
    
    for(var i=1;i<=grammar_example_js_array.length;i++){
        //$('#test').append("<div>arr["+i+"] =>"+grammar_example_js_array[i]+"</div>");
    	$('#grammar-example-js').append('<tr><td  style="width:20px;background-color: rgb(66,112,167); vertical-align:middle; "><span style="color: #fff;">'+i+'</span></td><td style="text-align: left;">'
        		+ '<span>'+grammar_example_js_array[i-1]+'</span></br>'
        		+ '<span>'+grammar_example_en_array[i-1]+'</span></br>'
        		+ '<span>'+grammar_example_vi_array[i-1]+'</span></br>'
        		+ '</td></tr>');
    }
    

    var grammar_note = results.rows.item(0).g_note;
    // note co dang : <div> note1</div> <div>note2></div>
    //su dung ham cat chuoi cho div de lay ve cac record
    var arrNote = grammar_note.split('<div>');
    for(var i=1; i<arrNote.length; i++) { //i= 0 -> null
    	//arrNote[i] co dang note1</div> -> cat tiep
    	var noteContent = arrNote[i].split('</div>');  //noteContent co dang note1</div> ; note2</div>  -> lay ptu thu 0
    		$('#grammar-note').append('<tr><td  style="width:20px;background-color: rgb(66,112,167); vertical-align:middle; "><span style="color: #fff;">☞</span></td><td style="text-align: left;">'
    	    		+ '<span>'+noteContent[0]+'</span></br>'
    	    		+ '</td></tr>');
    }
    
  //set icon cho favourite button 
	if (results.rows.item(0).g_favourite == 1) {
		$('a[task="favouriteTask"]').attr("id","addFavourite");
	}else{
		$('a[task="favouriteTask"]').attr("id"," ");
	}
}